let roundDate = {
  msg: "操作成功",
  result: {
    counts: 304,
    pageSize: 20,
    pages: 16,
    page: 1,
    items: [
      {
        id: "3995195",
        name: "毛茸茸暖意，儿童羊羔绒外套73-120cm",
        desc: "宽松版型，搭出休闲风格",
        price: "99.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/1661541f80bc9776e64125b7d586c9e6.jpg",
        discount: null,
        orderNum: 356,
      },
      {
        id: "3997565",
        name: "可机洗系列-女式尖头平底鞋",
        desc: "解放双手，随盒赠送洗鞋袋",
        price: "179.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/f5c2bd141d6640123532410bea6aecc2.png",
        discount: null,
        orderNum: 233,
      },
      {
        id: "3989765",
        name: "宜兴原矿紫砂壶茶具礼盒5件套",
        desc: "纯正紫砂原矿料，百年经典器型",
        price: "599.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/cec3c630e88787200095a8e11ee9942f.png",
        discount: null,
        orderNum: 167,
      },
      {
        id: "3987192",
        name: "PC膜拉链拉杆箱系列（17/20/24/28寸）",
        desc: "磨砂高级质地，轻巧短途出行",
        price: "206.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/8e1ee389d18a90fa00f338dc8534587a.png",
        discount: null,
        orderNum: 556,
      },
      {
        id: "1418015",
        name: "告别油腻解放双手，懒人抹布超值囤货装16卷",
        desc: "16卷800节，用完即扔，洗碗打扫不脏手",
        price: "176.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/52a8dfbbce131f621ef6d9d02476ed91.png",
        discount: null,
        orderNum: 151,
      },
      {
        id: "1622006",
        name: "网易智造冷暖轻薄汽车坐垫",
        desc: "高速静音双风机设计|冷暖两用",
        price: "249.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/e4cf5dc8a43d9d1336f4579ab8a72d70.png",
        discount: null,
        orderNum: 458,
      },
      {
        id: "1622019",
        name: "电动红酒开瓶器锂电池快充",
        desc: "风靡美国，6S开瓶",
        price: "129.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/4bfd44beec46454f55fd35f4dd8ae262.png",
        discount: null,
        orderNum: 233,
      },
      {
        id: "3398019",
        name: "祛味猫砂伴侣396克",
        desc: "细腻粉末深入猫砂，强力祛味",
        price: "49.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/95cb93ddb067b498327c9b7338a0af70.jpg",
        discount: null,
        orderNum: 268,
      },
      {
        id: "3804045",
        name: "男式经典切尔西商务正装鞋",
        desc: "商务新经典，出众的脚感体验",
        price: "444.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/94f800da40ffaf2633e1338a2cfbf54e.png",
        discount: null,
        orderNum: 156,
      },
      {
        id: "3827035",
        name: "拥有整个星空俄罗斯设计弦月流星项链",
        desc: "一款项链九种戴法，浪漫星月设计",
        price: "149.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/95d2b3d442b7208a5123164e1ff6c052.png",
        discount: null,
        orderNum: 156,
      },
      {
        id: "1435014",
        name: "原汁原味根根酥脆泰国香脆椰子卷16g*12",
        desc: "泰国新鲜椰汁制作，根根酥脆",
        price: "29.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/90cd2aeb3208a28c51a76111cd40e2d3.png",
        discount: null,
        orderNum: 190,
      },
      {
        id: "3995192",
        name: "毛茸茸小熊出没，儿童羊羔绒背心73-90cm",
        desc: "连帽熊耳设计，萌化少女心",
        price: "79.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/cd4b840751ef4f7505c85004f0bebcb5.png",
        discount: null,
        orderNum: 144,
      },
      {
        id: "3997532",
        name: "“柿柿”如意，新年夹棉连体衣/棉服0-5岁",
        desc: "三层锁温舒适，仿丝绵加倍保暖",
        price: "159.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/3cb61b3fd4761555e56c4a5f19d1b4b1.png",
        discount: null,
        orderNum: 121,
      },
      {
        id: "1524002",
        name: "多功能环保除臭猫砂盆雾灰色",
        desc: "封闭抽屉式设计，隔臭易清理",
        price: "179.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/8f1ca43da72e151c66455310a143a77d.jpg",
        discount: null,
        orderNum: 151,
      },
      {
        id: "1451027",
        name: "净水花洒好搭档韩国花洒替换滤芯2只装",
        desc: "适配除氯花洒，效果肉眼可见",
        price: "49.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/eba436352816180993555d11fff87087.png",
        discount: null,
        orderNum: 84,
      },
      {
        id: "3994896",
        name: "冬季不怕冷，婴童加厚保暖爬服",
        desc: "宝宝冬天不再冷，保暖常备单品",
        price: "139.00",
        picture:
          "https://yanxuan-item.nosdn.127.net/7170d6147878a099914b7bb7ce21773f.png",
        discount: null,
        orderNum: 292,
      },
    ],
  },
};
let arr = roundDate.result.items;
// 封装渲染函数
function render1() {
  let ul = document.querySelector(".core ul");
  let start = 0;
  let end = 4;
  for (let i = 0; i < 4; i++) {
    let str = "";
    let li = document.createElement("li");
    let div = document.createElement("div");
    for (let j = start; j < end; j++) {
      str += `<a>
    <img src=${arr[j].picture} alt="">
     <p>${arr[j].name}</p>
     <p>¥${arr[j].price}</p>
      </a>`;
    }
    start += 4;
    end += 4;
    div.innerHTML = str;
    li.appendChild(div);
    ul.appendChild(li);
    ul.children[0].classList.add("fade");
  }
}
render1();
// 按钮切换
let next = document.querySelector(".next");
let prev = document.querySelector(".prev");
let liss = document.querySelectorAll(".core ul li");
let spans1 = document.querySelectorAll(".indicator span");
let i = 0;
next.addEventListener("click", () => {
  i++;
  if (i > liss.length - 1) {
    i = 0;
  }
  common();
});
prev.addEventListener("click", () => {
  i--;
  if (i < 0) {
    i = liss.length - 1;
  }
  common();
});
document.querySelector(".indicator").addEventListener("click", (e) => {
  if (e.target.tagName === "SPAN") {
    i = e.target.id;
    common();
  }
});
// 封装函数
function common() {
  document.querySelector("li.fade").classList.remove("fade");
  lis[i].classList.add("fade");
  document.querySelector(".indicator span.active").classList.remove("active");
  spans1[i].classList.add("active");
}
//侧边栏
const first = document.querySelector("#liFirst");
const second = document.querySelector("#liSecond");
const aFirst = document.querySelector("#liFirst a");
const aSecond = document.querySelector("#liSecond a");
first.addEventListener("click", function () {
  document.querySelector(".contentSecond").style.display = "none";
  aSecond.classList.remove("active");
  document.querySelector(".contentFirst").style.display = "block";
  aFirst.classList.add("active");
});
second.addEventListener("click", function () {
  document.querySelector(".contentFirst").style.display = "none";
  aFirst.classList.remove("active");
  document.querySelector(".contentSecond").style.display = "block";
  aSecond.classList.add("active");
});
/*购物页面tab点击事件部分*/
const tab = document.querySelectorAll(".orderList ul li");
const shop = document.querySelectorAll(".shopping");
for (let i = 0; i < tab.length; i++) {
  tab[i].addEventListener("click", function () {
    for (let j = 0; j < tab.length; j++) {
      tab[j].style.borderTop = "none";
      shop[j].style.display = "none";
    }
    tab[i].style.borderTop = "1px solid #27ba9b";
    shop[i].style.display = "block";
  });
}
const shopping = [
  {
    id: "4001874",
    skuId: "300294887",
    name: "古法温酒汝瓷酒具套装白酒杯莲花温酒器",
    attrsText: "规格:珍藏套组（1壶4杯1托盘）+温酒器 ",
    specs: [],
    picture:
      "https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png",
    price: "1888.00",
    nowPrice: "1888.00",
    nowOriginalPrice: "1888.00",
    selected: true,
    stock: 2579,
    count: 1,
    isEffective: true,
    discount: null,
    isCollect: false,
    postFee: 2.0,
  },
  {
    id: "4003488",
    skuId: "300306318",
    name: "全防水HABU旋钮牛皮户外徒步鞋山宁泰抗菌",
    attrsText: "颜色:骑士黑 尺码:39 ",
    specs: [],
    picture:
      "https://yanxuan-item.nosdn.127.net/221317c85274a188174352474b859d7b.jpg",
    price: "444.00",
    nowPrice: "444.00",
    nowOriginalPrice: "444.00",
    selected: true,
    stock: 7670,
    count: 1,
    isEffective: true,
    discount: null,
    isCollect: false,
    postFee: 2.0,
  },
  {
    id: "4004350",
    skuId: "300311908",
    name: "网易味央黑猪大排330g*1袋",
    attrsText: "规格:大排330g*1袋 ",
    specs: [],
    picture:
      "https://yanxuan-item.nosdn.127.net/a078d2c4b8559b0a54430a0dc6460095.jpg",
    price: "37.00",
    nowPrice: "37.00",
    nowOriginalPrice: "37.00",
    selected: true,
    stock: 3222,
    count: 2,
    isEffective: true,
    discount: null,
    isCollect: false,
    postFee: 7.0,
  },
  {
    id: "4001874",
    skuId: "300294887",
    name: "古法温酒汝瓷酒具套装白酒杯莲花温酒器",
    attrsText: "规格:珍藏套组（1壶4杯1托盘）+温酒器 ",
    specs: [],
    picture:
      "https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png",
    price: "1888.00",
    nowPrice: "1888.00",
    nowOriginalPrice: "1888.00",
    selected: true,
    stock: 2579,
    count: 1,
    isEffective: true,
    discount: null,
    isCollect: false,
    postFee: 2.0,
  },
  {
    id: "4001874",
    skuId: "300294887",
    name: "古法温酒汝瓷酒具套装白酒杯莲花温酒器",
    attrsText: "规格:珍藏套组（1壶4杯1托盘）+温酒器 ",
    specs: [],
    picture:
      "https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png",
    price: "1888.00",
    nowPrice: "1888.00",
    nowOriginalPrice: "1888.00",
    selected: true,
    stock: 2579,
    count: 1,
    isEffective: true,
    discount: null,
    isCollect: false,
    postFee: 2.0,
  },
  {
    id: "4001874",
    skuId: "300294887",
    name: "古法温酒汝瓷酒具套装白酒杯莲花温酒器",
    attrsText: "规格:珍藏套组（1壶4杯1托盘）+温酒器 ",
    specs: [],
    picture:
      "https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png",
    price: "1888.00",
    nowPrice: "1888.00",
    nowOriginalPrice: "1888.00",
    selected: true,
    stock: 2579,
    count: 1,
    isEffective: true,
    discount: null,
    isCollect: false,
    postFee: 2.0,
  },
];
function generateRandomNumber() {
  let num = Math.floor(Math.random() * 9000000000000) + 1000000000000;
  return num;
}
render(shopping);
function render(arr) {
  num = 0;
  const htmlStr = arr.reduce(function (prev, item) {
    return (
      prev +
      `<div class="orderItem">
      <div class="head">
          <span>下单时间 ： <i>time</i></span>
          <span>订单编号：<i>${generateRandomNumber()}</i></span>
          <span class="timeEnd">
          </span>
      </div>
      <div class="body">
          <div class="details">
              <div class="img">
                  <img src="${item.picture}"
                      alt="">
              </div>
              <p class="pHead">${item.name}</p>
              <p class="pNav">${item.attrsText}</p>
              <p class="monavalent">￥${item.price}</p>
              <p class="number">x 1</p>
          </div>
          <div class="status">
              <p class="statusn">待付款</p>
          </div>
          <div class="total">
              <p class="monay">￥${+item.price + 5}</p>
              <p>(含运费:5元)</p>
              <p>在线支付</p>
          </div>
          <div class="column">
              <a href="../html/payment.html"><button>立即付款</button></a>
              <p><a href="./shoppingaddress.html">查看详情</a></p>
              <p class="delet"><a href="javascript:;">取消订单</a></p>
          </div>
      </div>
  </div>`
    );
  }, "");
  document.querySelector(".shopping").innerHTML = htmlStr;
}

//点击取消订单时显示提示信息
document.querySelector(".delet a").addEventListener("click", function () {
  document.querySelector(".deleteOne").style.display = "block";
});
//提示信息内span点击高亮的效果
const spanAll = document.querySelectorAll(".deleteContent span");
for (let j = 0; j < spanAll.length; j++) {
  spanAll[j].addEventListener("click", function () {
    for (let i = 0; i < spanAll.length; i++) {
      spanAll[i].style.border = "";
    }
    spanAll[j].style.border = "1px solid #27ba9b";
  });
}

//点击叉号和取消将提示信息隐藏
document.querySelector(".buttonOne").addEventListener("click", function () {
  document.querySelector(".deleteOne").style.display = "none";
});
document.querySelector(".deleteOff i").addEventListener("click", function () {
  document.querySelector(".deleteOne").style.display = "none";
});
//倒计时
let timeEnd = document.querySelectorAll(".timeEnd");
for (let i = 0; i < timeEnd.length; i++) {
  let count = (+new Date() + 1800000 - +new Date()) / 1000;
  let minute = parseInt((count % 3600) / 60);
  minute = minute < 10 ? "0" + minute : minute;
  let seconds = parseInt(count % 60);
  seconds = seconds < 10 ? "0" + seconds : seconds;
  timeEnd[i].innerHTML = `倒计时:${minute}分${seconds}秒`;
  count--;
  function reverseCount() {
    let timer = setInterval(function () {
      minute = parseInt((count % 3600) / 60);
      minute = minute < 10 ? "0" + minute : minute;
      seconds = parseInt(count % 60);
      seconds = seconds < 10 ? "0" + seconds : seconds;
      timeEnd[i].innerHTML = `倒计时:${minute}分${seconds}秒`;
      count--;
      if (count === 0) {
        clearInterval(timer);
      }
    }, 1000);
  }
  reverseCount();
}
